<template>
    <div class="h-[32px] px-[10px] leading-[32px] tracking-[2px] text-center text-[14px]  rounded-[4px] cursor-pointer select-none sm:hover:opacity-80 relative "
        :class="[
            {
                'bg-primary-300 active:bg-primary-500 text-black ': type === 'primary' && !backgroundColor,
                'bg-success-300 text-white': type === 'success' && !backgroundColor,
                'bg-danger-300 text-white': type === 'danger' && !backgroundColor,
                'bg-light-btnBg text-black dark:text-dark-btnText  dark:bg-dark-btnBg': type === 'default' && !backgroundColor,
                'opacity-50 cursor-not-allowed': disabled,
                'h-[24px] px-[8px] text-[12px]': size === 'sm',
                'h-[40px] px-[12px] text-[16px]': size === 'lg',
            }
            , customClass, isLoading ? '!cursor-no-drop flex items-center justify-center !opacity-50 active:bg-primary-300' : ''
        ]" @click="$emit('click')" :disabled="disabled" :style="backgroundColor ? { backgroundColor } : {}">
        <i :class="icon" v-if="icon" class="iconfont"></i>
        <slot v-if="!isLoading">
        </slot>
        <Loading v-else />
    </div>
</template>

<script setup lang="ts">
import Loading from './Loading.vue';
import { defineProps, withDefaults, defineEmits } from 'vue';

// 定义按钮类型和尺寸的联合类型
type ButtonType = 'primary' | 'success' | 'danger' | 'default';
type ButtonSize = 'sm' | 'md' | 'lg';

/**
 * 按钮组件的属性定义
 */
interface ButtonProps {
    /**
     * 按钮类型，用于控制按钮的背景颜色
     * @default 'primary'
     */
    type?: ButtonType;

    isLoading?: boolean;

    /**
     * 按钮尺寸，控制按钮的 padding 和文字大小
     * @default 'md'
     */
    size?: ButtonSize;

    /**
     * 是否禁用按钮
     * @default false
     */
    disabled?: boolean;

    /**
     * 按钮的图标，使用 Font Awesome 图标类名
     */
    icon?: string;

    /**
     * 按钮背景颜色，会覆盖type对应的默认颜色
     * 支持具体颜色值（如#ff0000）或CSS变量
     */
    backgroundColor?: string;

    /**
     * 自定义类名，用于添加额外的样式
     */
    customClass?: string;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<ButtonProps>(), {
    type: 'primary',
    size: 'md',
    disabled: false,
    icon: '',
    backgroundColor: '',
    customClass: ''
});

// 定义点击事件
const emits = defineEmits<{
    (e: 'click'): void;
}>();
</script>

<style scoped></style>
